<%@page import="cn.osworks.aos.core.asset.AOSUtils"%>
<%@ page contentType="text/html; charset=utf-8"%>
<%@ include file="/tags.jsp"%>
<aos:html>
<aos:head title="创客中国后台管理系统">
	<aos:base href="/" />
	<aos:include lib="ext,buttons" />
	<aos:include css="${cxt}/static/css/modules/index.css" />
	<%@ include file="indexStyle.jsp"%>
</aos:head>
<aos:body>
	<div id="loading-mask"></div>
	<div id="loading">
		<img width="100" height="100" src="${cxt}/static/image/gif/pageload/wheel.gif">
	</div>
	<%-- Center导航 --%>
	<div id="_div_center">
	</div>
	<%-- Banner导航 --%>
	<div id="_id_north_el" class="x-hidden north_el">
		<table>
			<tr>
				<td width="20%">
					<img src="${cxt}/static/image/logo/left-logo13.png"> 
				</td>
				<td align="left" width="60%">
				</td>
				<td align="right" style="padding: 5px">
					<table style="border-spacing: 3px;">
						<tr>
							<td colspan="4" class="main_text">
								<nobr>
									<i class="fa fa-rss"></i> 
									<% 
										String datestr = AOSUtils.getDateStr();
										out.print(datestr);
										out.print(AOSUtils.getWeekDayByDate(datestr));
									%> 
									
									<span id="rTime"></span>
								</nobr>
							</td>
						<tr>
						<tr align="right">
							<td><a class="button-small button-pill button-small-blue" onclick="_fn_logout()" onmouseout="_btn_onmouseout(this)"
								onmouseover="_btn_onmouseover(this);"><i class="fa fa-power-off"></i> 退出</a></td>
						<tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div id="_id_south_el" class="x-hidden">
		<div class="south_el_left main_text">
			<i class="fa fa-pagelines"></i> 你好, ${username}.
		</div>
		<div class="south_el_right main_text">
			<i class="fa fa-copyright"></i> 2016 - 2017 zhuzi
		</div>
	</div>
</aos:body>

<aos:onready ux="iframe" elAuth="false">
	<aos:viewport layout="border" id="_test">
		<aos:panel id="_north" region="north" contentEl="_id_north_el" height="60" maxHeight="60" minHeight="60" border="false"
			header="false" collapsible="true" collapseMode="mini" split="true">
		</aos:panel>
		<aos:panel id="_south" region="south" contentEl="_id_south_el" height="18" border="false" header="false"
			bodyStyle="backgroundColor:'#DFE8F6'">
		</aos:panel>
		<aos:tabpanel id="_west" region="west" activeTab="0" plain="true" tabBarHeight="30" bodyBorder="0 1 1 1" split="true" 
			maxWidth="300" border="true" minWidth="220" width="240" collapsible="true" collapseMode="mini" header="false">
			<aos:tab title="系统菜单" layout="fit">
				<aos:menu floating="false" plain="false" border="false">
					<c:forEach var="module" items="${menus}">
						<aos:menuitem text="${module.name}" icon="${module.iconCls}"
							onclick="fn_quick_click('${module.id}', '${module.name}', '${module.url}')" />
						<aos:menuitem xtype="menuseparator" />
					</c:forEach>
				</aos:menu>
			</aos:tab>
		</aos:tabpanel>
		<aos:tabpanel id="_tabs" region="center" activeTab="0" plain="true" tabBarHeight="30" bodyBorder="0 1 1 1" >
			<aos:plugins>
				<aos:tabCloseMenu extraItemsTail1="最大化 还原:fn_collapse_expand:shape_move_back.png"  extraItemsTail2="刷新:fn_reload:refresh.png" />
				<aos:tabReorderer/>
			</aos:plugins>
			<aos:tab id="_id_tab_welcome" reorderable="false" title="欢迎" contentEl="_div_center" />
		</aos:tabpanel>
	</aos:viewport>
	<script type="text/javascript">
	    //刷新当前活动卡片
	    function fn_reload(){
	    	var cur_tab_id = _tabs.getLayout().activeItem.id;
    		Ext.getCmp(cur_tab_id + '.iframe').load();
	    }
	    //最大化 还原
	    function fn_collapse_expand(){
	    	_west.toggleCollapse();
	    	_north.toggleCollapse();
	    }
		
		//响应快捷菜单单击事件
		function fn_quick_click(id, name, url) {
			fnaddtab(id, name, url);
		}
		_west.setActiveTab(0);
	</script>
</aos:onready>
<script type="text/javascript">
	//打开菜单功能页面
	function fnaddtab(module_id_, menuname, url, root_id_) {
		if (Ext.isEmpty(url)) {
			return;
		}
		var id = "_id_tab_" + module_id_;
		url = url.indexOf('http') === 0 ? url : '${cxt}' + url;
		var index = url.indexOf('?');
		//一级菜单的主页面所属的页面元素其page_id_同module_id_。
		url = url + (index === -1 ? '?' : '&') + 'aos_module_id_=' + module_id_
				+ '&aos_page_id_=' + module_id_;
		var _tabs = Ext.getCmp('_tabs');
		var tab = _tabs.getComponent(id);
		var tempflag = 0;
		if (!tab) {
			var iframe = Ext.create('AOS.ux.IFrame', {
				id : id + '.iframe',
				mask : true,
				layout : 'fit',
				//这个参数仅起到将iframe组件自带的mask调节到相对居中位置的作用
				height : document.body.clientHeight - 200,
				loadMask : '正在拼命加载页面, 请稍等...'
			});
			tab = _tabs.add({
				id : id,
				module_id_: module_id_, //供Tab与导航树逆向联动使用。
				root_id_: root_id_, //菜单节点所属的那个卡片标识，也是当前菜单树的根节点。供Tab与导航树逆向联动使用。
				title : '<span class="app-container-title-normal">' + menuname + '</span>',
				closable : true,
				layout : 'fit',
				items : [ iframe ]
			});
			tab.on('activate', function() {
				//防止已打开的功能页面切回时再次加载
				if (tempflag === 0) {
					iframe.load(url);
					tempflag = 1;
				}
			});
		}
		//激活新增Tab
		_tabs.setActiveTab(tab);
	}
	

	//移除首页正在加载的缓冲div
	Ext.EventManager.on(window, 'load', function() {
		AOS.job(function() {
			Ext.get('loading').fadeOut({
				duration : 500, //遮罩渐渐消失
				remove : true
			});
			Ext.get('loading-mask').fadeOut({
				duration : 500,
				remove : true
			});
		}, 50); //做这个延时，只是为在Dom加载很快的时候GIF动画效果更稍微显著一点

	});

	//注销
	function _fn_logout() {
		AOS.confirm('注销并安全退出系统吗？', function(btn) {
			if (btn === 'cancel') {
				AOS.tip('操作被取消。');
				return;
			}
			AOS.mask('正在注销, 请稍候...');
			window.location.href = '${cxt}/console/j_spring_security_logout';
		});
	}

	//按钮矢量图标动画控制
	function _btn_onmouseout(me) {
		//停止ICON转动
		Ext.get(me).down('i').removeCls('fa-spin');
	}

	//按钮矢量图标动画控制
	function _btn_onmouseover(me) {
		//ICON转动
		Ext.get(me).down('i').addCls('fa-spin');
	}

	//显示系统时钟
	function showTime() {
		Ext.get('rTime').update(Ext.Date.format(new Date(), 'H:i:s'));
	}

	//加载完毕执行函数
	window.onload = function() {
		showTime();
		AOS.task(showTime, 1000);
	}
	
</script>
</aos:html>